<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('Hr查询列表')" />
	<th:block th:include="include :: list-css" />
	<th:block th:include="include :: motif-alone" />
</head>
<style>
	.mid-content{padding: 16px}
	.layui-form-radio{margin-top:0}
	.listext th{background:#eee;color:#3366cc;}
	.listext th,.listext td{border:solid 1px #ddd;text-align:left;padding:10px;font-size:14px;}
	#importProgress {z-index:20200202;background-color: #000;opacity: 0.3;display:none;}
	.importProgress {width:300px;z-index:20202222;position: fixed;top: 34%;left: 40%;display:none;}

	#lightbox_mask{display: none;position: fixed;z-index: 19891016;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .7);}
	#showpic{position: fixed;z-index: 19891017;left: 0;top: 0;width: 100%;height: 100%;text-align:center;padding-top: 0.5%;}
	#dp{width: 30%;margin:auto}
	#viewCard{width: 300px;background: #fff;margin:6% auto;padding:0px 0 40px 0;border-radius: 10px;position:relative;overflow: hidden;box-shadow: 5px 5px 50px #000;}


	#viewCard span{position:absolute;display:block}
	#viewCard span:nth-child(1){height:4px;width:300px;top:0;left:-300pxpx;background:linear-gradient(to right,rgba(0,0,0,0),#a0c2e7);
		border-top-right-radius:1px;border-bottom-right-radius:1px;animation:span1 2s linear infinite;animation-delay:1s}
	@keyframes span1{0%{left:-300px}100%{left:300px}}
	#viewCard span:nth-child(2){height:374px;width:4px;top:-374px;right:0;background:linear-gradient(to bottom,rgba(0,0,0,0),#a0c2e7);
		border-bottom-left-radius:1px;border-bottom-right-radius:1px;animation:span2 2s linear infinite;animation-delay:2s}
	@keyframes span2{0%{top:-374px}100%{top:374px}}
	#viewCard span:nth-child(3){height:4px;width:300px;right:-300px;bottom:0;background:linear-gradient(to left,rgba(0,0,0,0),#a0c2e7);
		border-top-left-radius:1px;border-bottom-left-radius:1px;animation:span3 2s linear infinite;animation-delay:3s}
	@keyframes span3{0%{right:-300px}100%{right:300px}}
	#viewCard span:nth-child(4){height:374px;width:4px;bottom:-374px;left:0;background:linear-gradient(to top,rgba(0,0,0,0),#a0c2e7);
		border-top-right-radius:1px;border-top-left-radius:1px;animation:span4 2s linear infinite;animation-delay:4s}
	@keyframes span4{0%{bottom:-374px}100%{bottom:374px}}
	/* #viewCard:hover{transition:all .5s;transform:rotate(-3deg) scale(1.1);box-shadow:0 3px 5px rgba(0,0,0,.4)} */
	/* #viewCard:hover span{animation-play-state:paused} */

	.c-photo{heigh:100px;width:100px;border-radius:8px;transition:border-radius 1s;margin-top:30px;}
	.c-photo:hover{border-radius:0;}
	#viewCard h4{height:20px;line-height:20px;font-size: 20px;color: #4e5f6f;border-bottom:1px solid #ddd;padding:10px 0 30px;}
	#viewCard .v-row:hover{background:#E0EEFF}
	#viewCard .v-row div{float: left;width: 50px;}
	.close_d{top:-1px;right:1px;position:absolute;width:32px;}
	.close_d img{width:12px;}
	.close_d img:hover{background: red}

	/*详情按钮的样式*/
	#detail-btn{background-color:#FFF !important;color:#142A48 !important;}
	#layui-table-page1{float:right;}
</style>
<body class="no-skin">
<th:block th:include="listinclude :: container" />

<!-- 导入明细 -->
<div id="iTable" class="display_no">
	<table class="importTable listext" data-resizable-columns-id="demo-table">
		<tbody id="itbody">
		</tbody>
	</table>
</div>
<!-- 导入进度条 -->
<div id="importProgress" class="layui-layer-shade">
</div>
<div class="importProgress">
	<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="dhprogress">
		<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
	</div>
</div>
<div id="lightbox_mask" style="display: none;"></div>
<div id="showpic" style="display: none">
	<div id="viewCard">
		<div class="close_head">
			<div class="close_d">
				<img class="close" src="../img/close.png">
			</div>
		</div>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<div>
			<img class="c-photo" alt="" src="../img/profile.jpg">
		</div>
		<h4><p class="c-userName"></p></h4>
		<div class="v-row"><div><i class="dhicon dh-zu4046_2"></i></div><p class="c-deptName"></p></div>
		<div class="v-row"><div><i class="dhicon dh-zu4046_2_1"></i></div><p class="c-cidName"></p></div>
		<div class="v-row"><div><i class="dhicon dh-zu4046_1_1"></i></div><p class="c-positionName"></p></div>
		<div class="v-row"><div><i class="dhicon dh-zu4046_3"></i></div><p class="c-userPhone1"></p></div>
		<div class="v-row"><div><i class="dhicon dh-envelope"></i></div><p class="c-userEmail"></p></div>
	</div>
</div>

<script>
	var element,thStr,tableUrl='';
</script>
<script th:inline="javascript">
	/*<![CDATA[*/
	var gridColumns = [[${gridColumns}]],
		business = [[${storage}]],
		businessName = gridColumns.moduleAlias,
		moduleTable = [[${moduleTable}]],
		importFields = [[${importFields}]],
		passwordAuthentication = [[${passwordAuthentication}]],
		session = [[${session}]],
		buttonState = [[${buttonState}]];
	/*]]>*/
	var prefix = "/storage/"+business;
	tableUrl = prefix+"/list";
	var openRowUrl = "/storage/"+(business.split('/')[1]?business.split('/')[0]:business)+"/edit?nid=",
			delUrl = prefix+"/delete",
			exportUrl = prefix+"/export",
			templateUrl = prefix+"/exporttemplate";
	var importTitle,
			fieldWidth = {},		//导入列表字段宽度
			filedRequired = {},		//导入列表必填字段
			dateFiled = [],			//导入列表日期字段
			hasNull = false;		//导入数据必填字段有空值

</script>
<th:block th:include="include :: footer" />
<script>
	$.each(gridColumns.dictionaryForPageFieldList,function(i,v){
		fieldWidth[v.fields] = v.fieldFrontWidth;
		if(v.fieldFrontRequired)filedRequired[v.fields] = v.fieldName;
		if(v.fieldFrontType == 't_date')dateFiled.push(v.fields);
	})
</script>
<!-- HR导入区域 -->
<script type="text/template" id="importTpl">
	<form enctype="multipart/form-data" class="mt20 mb10">
		<div class="col-xs-offset-1">
			<input type="file" id="file" name="file"/>
			<div class="mt10 pt5">
				<a onclick="getTemplate()" class="btn btn-default btn-xs getTemplate"><i class="dhicon dh-file-excel-o"></i> 下载模板</a>
			</div>
			<font color="red" class="pull-left mt10">
				提示：仅允许导入“xls”或“xlsx”格式文件！
			</font>
		</div>
	</form>
</script>
<th:block th:include="include :: tableBtn" />
<th:block th:include="include :: businessJS" />
<th:block th:include="include :: searchJS" />
<th:block th:include="include :: listJS" />
<th:block th:include="listinclude :: list-templeat" />
</body>
</html>




